<template>
  <div>
    <div class="weui-cells__title">{{title}}</div>
    <div class="weui-cells" style="position:relative">
      <template v-for="(item, index) in list">
        <a class="weui-cell weui-cell_access" :href="item.link ? item.link : 'javascript:;'"
           v-if="item.is_link || item.link" v-show="!item.is_hide"
           :style="{left:(item.left*50)+'px'}" @click.stop="$emit('on-click', index)">
          <div class="weui-cell__hd" v-if="item.img || item.icon">
            <img :src="item.img" alt="" style="width:20px;margin-right:5px;display:block" v-if="item.img">
            <i class="iconfont" :style="{color:item.icon_color}" style="margin-right:5px" v-html="item.icon"
               v-if="item.icon">
            </i>
          </div>
          <div class="weui-cell__bd">
            <p>{{item.value}}</p>
          </div>
          <div class="weui-cell__ft">
            <i class="weui-loading" v-if="item.is_loading">
            </i>
            <span v-if="!item.is_loading"
                  :class="[{'vux-badge':item.has_badge}, {'vux-badge-single':item.has_badge && (!item.desc || item.desc.length<2)}]">
			  {{item.desc}}
			</span>
          </div>
        </a>
        <div class="weui-cell" v-else :style="{left:(item.left*50)+'px'}" v-show="!item.is_hide">
          <div class="weui-cell__hd" v-if="item.img">
            <img :src="item.img" alt="" style="width:20px;margin-right:5px;display:block">
          </div>
          <div class="weui-cell__bd">
            <p>{{item.value}}</p>
          </div>
          <div class="weui-cell__ft">
            <i class="weui-loading" v-if="item.is_loading">
            </i>
            <span v-if="!item.is_loading"
                  :class="[{'vux-badge':item.has_badge}, {'vux-badge-single':item.has_badge && (!item.desc || item.desc.length<2)}]">
			  {{item.desc}}
			</span>
          </div>
        </div>
        <transition-group name="fade">
          <div v-for="(_item, _index) in item.list" style="position:absolute;line-height:45px;text-align:center"
               :style="{top:(index*45)+'px', right:(-(item.left+_index+1)*50)+'px', width:50+'px', color:_item.color, backgroundColor:_item.backgroundColor}"
               :key="_item" v-show="!!item.left" @click.stop="$emit('on-list', index, _index)">
            {{_item.label}}
          </div>
        </transition-group>
      </template>
    </div>
  </div>
</template>

<script>
  import swipe from '../lib/Swipe'

  export default {
    props: {
      list: {
        type: Array,
        default() {
          return [{
            value: 'value',
            desc: 'desc'
          }]
        }
      },
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        last_node_index: -1
      }
    },
    methods: {
      bindSwipe(node, index) {
        swipe.swipeLeft(node, () => {
          var left = this.list[index].left || 0
          if (left + this.list[index].list.length > 0)
            this.$set(this.list[index], 'left', left - 1)
        }, {
          triggerOnMove: true
        })
        swipe.swipeRight(node, () => {
          var left = this.list[index].left || 0
          if (left < 0)
            this.$set(this.list[index], 'left', left + 1)
        }, {
          triggerOnMove: true
        })
      }
    },
    updated() {
      var nodes = this.$el.childNodes,
        cells = null
      for (var i = 0; i < nodes.length; i++) {
        if ('weui-cells' == nodes[i].className) {
          cells = nodes[i]
          break
        }
      }
      nodes = cells.childNodes
      for (var i = 0, j = 0; i < nodes.length; i++) {
        if (nodes[i].className && nodes[i].className.split(' ').indexOf('weui-cell') != -1) {
          if (this.list[j].list && j > this.last_node_index)
            this.bindSwipe(nodes[i], j)
          j++
        }
      }
      this.last_node_index = j
    }
  }
</script>

<style scoped>
  @import '~weui/dist/style/weui.min.css';

  .vux-badge {
    display: inline-block;
    text-align: center;
    background: #f74c31;
    color: #fff;
    font-size: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 8px;
    padding: 0 6px;
    background-clip: padding-box;
  }

  .vux-badge-single {
    padding: 0;
    width: 12px;
  }
</style>
